<script setup lang="ts">
import { useUserSettings } from '@/store/useUserSettings'
import { Moon, Sunny, Language } from '@vicons/ionicons5'
import { useLocaleOptions } from '@/language'

const userSettings = useUserSettings()

/** naive 的下拉列表 */
const localeOptions = useLocaleOptions()
</script>

<template>
	<n-layout-header
		_flex="~ shrink-0 items-center"
		_p="x-5"
		_h="20"
		_space="x-2"
		_bg="n-card-color"
		_shadow="n-box-shadow-1"
		_border="n-card-color b"
	>
		<n-button class="ml-auto" @click="$router.push('/login')">
			{{ $t('login-out') }}
		</n-button>

		<!-- 语言列表icon -->
		<n-dropdown show-arrow :options="localeOptions" @select="(key: 'zhCN' | 'enUS') => (userSettings.locale = key)">
			<n-button circle :bordered="false">
				<template #icon>
					<Language />
				</template>
			</n-button>
		</n-dropdown>

		<!-- 黑暗模式切换 -->
		<n-switch v-model:value="userSettings.isDark">
			<template #checked-icon>
				<n-icon :component="Moon" />
			</template>
			<template #unchecked-icon>
				<n-icon :component="Sunny" />
			</template>
		</n-switch>
	</n-layout-header>
</template>
